<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>09_全屏遮罩</title>
    <style>
        .mark{
            background-color: rgba(0,0,0,.3);
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
        }
    </style>
</head>
<body>
<div class="mark"></div>
<div class="main">
    <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam aperiam consectetur debitis eaque, earum eum
        facere ipsum modi nihil quia sapiente suscipit, vero voluptatum! Commodi corporis doloremque nisi obcaecati sed.
    </div>
    <div>Deserunt, quidem, temporibus. Atque commodi magnam neque officia repudiandae ullam, voluptates! Aspernatur
        commodi dignissimos ea enim esse placeat possimus vel. Incidunt, maxime nihil? Aliquid doloremque ducimus eaque
        excepturi mollitia sed.
    </div>
    <div>Alias aut esse nesciunt totam. Blanditiis consectetur deleniti, distinctio dolorum eius esse hic, iure laborum,
        nihil odit placeat provident qui repellat sapiente sequi sunt velit voluptate. Dolore reiciendis sit tempora!
    </div>
    <div>Aliquam nisi odit placeat rem? Amet architecto, atque eveniet laborum magnam minus necessitatibus quas. Atque,
        beatae dolore est magnam mollitia, nobis optio placeat, praesentium quis quod ullam voluptatum. Eos, veniam?
    </div>
    <div>Deleniti expedita nam odit? Adipisci animi aperiam deserunt dicta doloremque enim esse expedita iusto
        necessitatibus nostrum odit quas qui quibusdam recusandae, reprehenderit saepe tempora! Aliquid aperiam cumque
        iusto libero minus?
    </div>
    <div>Ad ipsum pariatur ratione. Atque consectetur deserunt distinctio harum, ipsam labore, libero minima nam
        necessitatibus numquam officia pariatur perspiciatis placeat, qui quos recusandae tempora voluptatibus. Autem
        dicta placeat reprehenderit sapiente.
    </div>
    <div>At aut, cupiditate fugit in ipsam nemo pariatur voluptatibus. Ab commodi deleniti ea id ipsum iste iure quas,
        quia quo, ratione reiciendis voluptas voluptate? Ducimus eius necessitatibus sapiente sequi soluta!
    </div>
    <div>Incidunt itaque labore quas vero. Adipisci molestiae placeat sequi velit. Aspernatur autem, corporis deleniti
        doloremque ea eaque earum enim esse illo inventore iste, officiis, repudiandae soluta totam veniam! Ab, modi!
    </div>
    <div>Adipisci aperiam commodi debitis dicta dignissimos, doloremque excepturi exercitationem fugit id impedit
        incidunt laboriosam magni minima neque nihil nostrum obcaecati optio perspiciatis placeat provident quae
        quisquam, rem tempora ut voluptatem.
    </div>
    <div>Atque impedit ipsam ipsum itaque magnam nemo nostrum, odit, omnis pariatur quae rem repellat repudiandae sit?
        Accusantium, aspernatur commodi eum ipsam iure maxime nemo numquam officia quas tempore vitae voluptatibus.
    </div>
    <div>Animi dolores earum ex fuga illum iure nemo neque vero vitae. Aperiam autem beatae culpa cum dicta dolorem
        eaque eveniet, facilis ipsa neque nostrum officia omnis placeat quas, quo tenetur.
    </div>
    <div>Doloremque enim est minima quos. Animi beatae dicta perferendis quasi recusandae, repellat sint ullam. Animi
        aperiam assumenda at beatae delectus deserunt ex laboriosam nesciunt officiis perferendis soluta totam,
        veritatis voluptatem!
    </div>
    <div>Blanditiis deserunt eligendi, incidunt nemo nesciunt obcaecati quo sapiente? Alias aliquid blanditiis cum
        dolorem eligendi eos laudantium molestias nihil obcaecati odio officiis perspiciatis quaerat quidem quos
        recusandae, repellendus sequi vero.
    </div>
    <div>Alias dolores earum facere fugit illo, impedit nihil nostrum tempora! Alias dolore doloribus, dolorum ducimus
        enim eos esse impedit incidunt iure labore molestias mollitia necessitatibus optio quia quibusdam, repellat
        similique?
    </div>
    <div>Aperiam asperiores beatae consequatur cum doloremque doloribus ducimus, fugit impedit minus numquam officiis
        quae saepe tempore vitae voluptatem! Assumenda at aut autem deleniti deserunt doloremque laudantium magni
        officia quasi veniam?
    </div>
    <div>Architecto aspernatur autem consectetur culpa cum debitis ea earum eligendi enim expedita fuga ipsum magni
        minus nam necessitatibus nemo nostrum possimus quia, reiciendis, repellendus sapiente soluta sunt tempora velit,
        voluptatibus.
    </div>
    <div>At beatae dolorem ducimus eligendi et exercitationem, incidunt nobis quod ratione voluptates. A animi
        consequuntur deleniti excepturi id iusto minima modi omnis, porro quasi, sunt vel vero! Itaque quidem,
        voluptatum!
    </div>
    <div>Ab ad adipisci earum ipsam laborum magnam maiores nam praesentium quis veritatis? Beatae dolore fugiat tenetur
        veritatis. A, accusamus asperiores debitis, dicta iste itaque labore praesentium quos vitae, voluptates
        voluptatibus?
    </div>
    <div>Ab debitis delectus dignissimos ipsam iusto magnam modi totam. Alias aut non odit quae? A, at, aut deserunt
        error expedita laudantium maxime natus officia quia quibusdam saepe totam vel vero.
    </div>
    <div>Aliquam consequuntur dolores et eum exercitationem id laudantium magni molestiae, nam qui, sequi suscipit
        tempore tenetur. A commodi, dicta explicabo illum labore laborum magnam nobis obcaecati reprehenderit similique
        soluta sunt?
    </div>
    <div>Deserunt eveniet nam omnis. Accusamus aliquid amet asperiores beatae, debitis dolores esse exercitationem
        incidunt iusto magnam perspiciatis possimus, sequi similique. Autem deleniti doloremque dolorum, eveniet
        molestias nulla pariatur quidem sunt.
    </div>
    <div>Ad adipisci aspernatur beatae consequuntur dignissimos dolores ea eius eligendi esse expedita fugit ipsum
        labore laborum, laudantium libero maxime mollitia necessitatibus nihil nisi nobis quam quisquam quod tempora
        velit voluptatem?
    </div>
    <div>Aliquam, dicta earum error illo in iste molestiae saepe totam unde veniam? Assumenda dignissimos dolor ea eum,
        facere inventore iure molestias necessitatibus nemo quia quis quo, rem reprehenderit saepe sit.
    </div>
    <div>Aliquam aliquid assumenda at, consequatur cum dicta dolor dolorum earum enim harum illum ipsa labore laudantium
        magni maiores minima molestias necessitatibus odio omnis provident quo repudiandae soluta suscipit unde velit!
    </div>
    <div>Deleniti earum ipsam iure, magnam magni nam perferendis placeat quam sed voluptates! Cupiditate deleniti, earum
        eos eveniet hic incidunt libero minus modi officiis omnis quasi saepe suscipit totam vel voluptatibus?
    </div>
    <div>Aut distinctio dolorem doloribus, ea earum est, exercitationem minima modi nobis non obcaecati officiis, porro
        quam recusandae voluptatibus? Autem eaque, harum iure minima neque nisi non odio quasi quis sequi.
    </div>
    <div>Amet consequatur culpa dolor eum id ipsum iure nulla quia sunt voluptatem? Aliquid asperiores dignissimos
        distinctio eaque esse nobis nostrum placeat praesentium quia repellendus sapiente, sit soluta totam veniam vero.
    </div>
    <div>Accusantium adipisci amet animi, architecto consequatur, corporis debitis delectus distinctio dolore ducimus
        enim fugiat iusto modi neque quidem sed similique soluta ullam vero, voluptatem. Amet dicta itaque nisi nobis
        soluta?
    </div>
    <div>Ab, animi aperiam consectetur delectus deleniti eius eligendi est impedit inventore, iusto laborum neque quia
        quibusdam? A ad architecto aspernatur commodi dignissimos ducimus eum hic, pariatur, placeat quisquam voluptas
        voluptatibus.
    </div>
    <div>Accusamus beatae commodi, consectetur culpa dignissimos eaque eius, et facilis id impedit magni modi, nostrum
        officiis placeat porro possimus provident quae repudiandae sunt veritatis! Animi commodi dolorum hic laboriosam
        nam.
    </div>
    <div>Accusamus amet dignissimos eos iure iusto laborum nesciunt voluptate voluptates! A assumenda consectetur eaque
        esse illo modi officiis, perferendis quasi! Ad architecto impedit in minus nam sint? Illum, magni, modi.
    </div>
    <div>Ab accusamus aliquid, assumenda atque beatae debitis dolore eligendi ex explicabo fuga modi mollitia nihil
        obcaecati pariatur quasi qui quia quos reiciendis repellat repellendus velit veritatis vero. Officiis, tenetur
        vero!
    </div>
    <div>Distinctio eaque laboriosam modi, nemo nisi porro quam quis repellat voluptates. Consectetur, deleniti eius eos
        expedita id libero minus molestias optio. Cumque dolor eveniet facilis illo nobis quod ullam! Suscipit.
    </div>
    <div>Aliquid animi culpa, ducimus ea, ipsa non numquam optio quibusdam quo repudiandae sequi voluptatem voluptates.
        A aperiam consequatur deserunt eius, eligendi iure laboriosam nesciunt quam quis ut! Delectus, enim unde?
    </div>
    <div>Aut dicta ex illo iusto magni minus nulla quia saepe totam voluptatum. A, accusantium deleniti dicta ea eius
        expedita facilis fugit ipsa molestias nemo nisi, nostrum quibusdam quis quo unde!
    </div>
    <div>Accusantium architecto atque beatae commodi consequatur cum cumque debitis ducimus ipsum iusto maiores minus
        molestias nam necessitatibus nemo nesciunt nostrum omnis praesentium quam quibusdam quisquam ratione rerum,
        soluta temporibus veritatis?
    </div>
    <div>Commodi dignissimos dolore dolorem excepturi itaque, molestiae odio pariatur placeat quae quaerat repellat
        sapiente tempora voluptate. Architecto assumenda dolore facere fugiat fugit libero maxime, modi quibusdam rem
        repudiandae sapiente vitae!
    </div>
    <div>Aliquid aut autem debitis ipsa iure maiores praesentium sapiente, veritatis. Ab adipisci, asperiores at ducimus
        eligendi est iste laboriosam nemo non odit quasi quia quidem repellendus sequi velit veritatis vitae!
    </div>
    <div>Corporis nam quae tempore vel vero. Debitis distinctio ipsam iure perferendis praesentium quae quia recusandae
        saepe similique, voluptate. A ab aut deserunt, enim id optio quod sapiente soluta tenetur veniam.
    </div>
    <div>Ab eligendi expedita incidunt ipsa nam necessitatibus quibusdam unde vel. Accusantium blanditiis distinctio
        dolores eius magni perferendis quibusdam quo sapiente tempora veniam. In incidunt ipsam neque nisi officiis qui
        temporibus.
    </div>
    <div>Accusantium adipisci aperiam beatae deserunt eos error eveniet excepturi, facilis illum laborum laudantium
        magnam minima non numquam officia porro qui quisquam quos repellendus reprehenderit saepe sint, sit temporibus
        tenetur veniam.
    </div>
    <div>A aliquid amet aperiam aspernatur consequatur cum deserunt dolores error fuga veritatis. Ab, beatae cupiditate
        distinctio dolore dolorem exercitationem libero molestiae mollitia, nam nesciunt obcaecati quis sapiente sed
        veniam voluptates?
    </div>
    <div>Aliquid animi, architecto distinctio dolore doloribus earum facere in ipsam mollitia necessitatibus nostrum
        quam quasi quibusdam, quisquam repellat suscipit velit veritatis voluptatem! Corporis dolorum fugiat fugit
        numquam porro sunt voluptates?
    </div>
    <div>Atque eum harum in, ipsum, iste minus nesciunt numquam odio optio possimus quaerat quo ratione recusandae vel
        voluptas. Consectetur deserunt dignissimos dolorem explicabo minima odit sapiente similique suscipit ullam unde?
    </div>
    <div>Asperiores at corporis dignissimos eveniet ex fugit harum molestiae neque nobis omnis perferendis placeat quam
        quidem, quod repudiandae sit tenetur voluptatum! Consequatur debitis ducimus magni necessitatibus non quidem quo
        veniam?
    </div>
    <div>Ab aliquam animi, asperiores at commodi cupiditate delectus dolorem ex expedita in libero molestiae, mollitia
        nesciunt non officia perspiciatis porro quidem quod rem rerum soluta sunt unde, ut vitae voluptates!
    </div>
    <div>Eveniet exercitationem neque pariatur, quaerat quas repellat veniam. A eum iste minima neque nisi omnis,
        placeat porro reprehenderit! Consequuntur earum harum itaque sit sunt. Amet eligendi magnam maiores officia sit.
    </div>
    <div>Commodi doloribus eveniet fuga iure quia. Reiciendis suscipit voluptates voluptatibus. Ab atque blanditiis
        distinctio dolores et excepturi, fugit ipsa laborum minima odit quaerat qui quibusdam rem tempore vitae!
        Nesciunt, veniam.
    </div>
    <div>Accusamus, accusantium adipisci aut beatae consectetur debitis et fugiat illo, iure laudantium magni nulla
        numquam quam recusandae tempore! Adipisci ducimus error eum facere fugiat ipsa ipsum numquam perferendis quas
        tempore?
    </div>
    <div>A ab amet aperiam beatae blanditiis error, inventore iure iusto maiores modi molestias nam necessitatibus nihil
        obcaecati officia perferendis quam, quas qui ratione, repellat rerum sed temporibus veniam veritatis voluptate.
    </div>
    <div>Excepturi iure magnam, provident sequi suscipit vero. Ab cumque, ducimus eos error iusto omnis pariatur qui
        quod repellat saepe sunt tempore! Ad aperiam est illum laborum natus quibusdam, saepe suscipit!
    </div>
    <div>A ad architecto autem consequatur delectus ea earum, error eveniet excepturi exercitationem illum ipsa libero
        natus obcaecati provident quae quia quibusdam, quis quo repellendus sapiente sit sunt tenetur unde veniam.
    </div>
    <div>Ab adipisci autem cum cumque exercitationem iste libero numquam, quo suscipit voluptate. Accusantium aperiam
        asperiores dolores eos iusto magnam obcaecati reiciendis, ullam voluptas voluptatum? Consectetur dolor error
        harum perferendis repellendus.
    </div>
    <div>A cum nesciunt nihil quia voluptatum! Aliquam, blanditiis, numquam. A animi consequuntur dolor dolorem dolorum
        hic ipsam, itaque molestiae molestias necessitatibus non nostrum odio quasi ratione tempore veritatis voluptas
        voluptatum.
    </div>
    <div>Asperiores aspernatur assumenda consequatur earum, et excepturi fuga, ipsam, labore laudantium perspiciatis
        provident quibusdam sequi tempora veniam voluptas! Aspernatur commodi excepturi iste laudantium nostrum
        obcaecati quod sit tempora tempore tenetur.
    </div>
    <div>Alias consectetur, culpa dolor eum expedita facilis fuga illum iure iusto libero nisi, nostrum omnis quae
        quisquam quo reiciendis, reprehenderit suscipit unde vero voluptas? Animi at explicabo minus tenetur. Harum!
    </div>
    <div>Aliquid consequuntur dolor labore laudantium minus nisi quidem, rem sint voluptas voluptatum! Ea, fugiat ipsa
        iure molestias mollitia necessitatibus nemo nulla numquam odio provident quaerat quam qui, quisquam sequi
        voluptates.
    </div>
    <div>At autem blanditiis consequuntur, corporis culpa cumque distinctio dolorum excepturi fuga fugiat fugit hic
        illum in laborum, modi nam necessitatibus neque nobis nostrum nulla quibusdam soluta totam vel! Delectus,
        repellendus?
    </div>
    <div>Animi architecto aut culpa distinctio ea eos esse facilis illo impedit iste laudantium magnam minus molestiae
        nobis obcaecati, porro quam saepe vitae. Aspernatur blanditiis dicta maiores, quasi quidem tenetur velit.
    </div>
    <div>Alias culpa delectus dicta distinctio dolores doloribus eligendi eveniet explicabo facilis fugit hic in ipsa
        laboriosam libero, minima natus officia perferendis, praesentium quam quibusdam ratione reprehenderit sequi ut
        veritatis vitae?
    </div>
</div>
</div>
</body>
</html>